<template>
  <el-dialog
    v-model="visible"
    title="库存占用明细"
    width="1200"
    align-center
    :show-close="true"
    :close-on-click-modal="false"
    :close-on-press-escape="false"
    :before-close="clickClose"
  >
    <div class="procure-distribution" v-loading="loading">
      <!-- 商品详情页面 -->
      <header>
        <div class="left">
          <img :src="detail.mainPicUrl" alt="" />
        </div>
        <div class="right">
          <p class="name f18 mb20">{{ detail.productAliasName || "-" }}</p>
          <p class="f14" style="white-space: break-spaces">
            <!-- {{ getSpes(detail.skuSpecification) }} -->
            {{ detail.skuSpecification }}
          </p>
          <p class="f14">SKU编码：{{ detail.businessSkuId || "-" }}</p>
          <p class="f14">
            ID：{{ detail.productId || "-" }}
            <!-- {{ getName(skuObj.productUnit) }} -->
          </p>
        </div>
      </header>
      <div class="block"></div>

      <!-- 数据表格 -->
      <el-table class="jzt-table" :data="list" stripe border style="width: 100%; max-height: 500px; overflow-y: auto">
        <el-table-column prop="deliveryWarehouseName" show-overflow-tooltip label="出库仓">
          <template #default="scope">
            {{ scope.row.deliveryWarehouseName || "-" }}
          </template>
        </el-table-column>
        <el-table-column prop="inboundWarehouseName" show-overflow-tooltip label="入库仓">
          <template #default="scope">
            {{ scope.row.inboundWarehouseName || "-" }}
          </template>
        </el-table-column>
        <el-table-column prop="deliveryQuantity" show-overflow-tooltip label="占用库存数量" width="140" />
        <el-table-column prop="deliveryPartQuantity" show-overflow-tooltip label="占用库存件数" width="140" />
        <el-table-column prop="deliveryType" show-overflow-tooltip label="占用类型" width="140">
          <template #default="scope">
            {{
              scope.row.deliveryType === 1
                ? "采购退货"
                : scope.row.deliveryType === 2
                  ? "订单出库"
                  : scope.row.deliveryType === 3
                    ? "调拨出库"
                    : scope.row.deliveryType === 4
                      ? "其他出库"
                      : scope.row.deliveryType === 101
                        ? "库存锁定"
                        : "-"
            }}
          </template>
        </el-table-column>
        <el-table-column prop="linkCode" show-overflow-tooltip label="关联编码" width="140" />
        <el-table-column prop="deliveryStatus" show-overflow-tooltip label="状态" width="140">
          <template #default="scope">
            {{
              scope.row.deliveryStatus === 1
                ? "待出库"
                : scope.row.deliveryStatus === 2
                  ? "已出库"
                  : scope.row.deliveryStatus === 3
                    ? "已撤销"
                    : "-"
            }}
          </template>
        </el-table-column>
        <el-table-column prop="createTime" fixed="right" show-overflow-tooltip label="创建时间" width="140" />
      </el-table>
    </div>
    <template #footer>
      <div class="dialog-footer">
        <el-button type="primary" plain @click="clickClose">知道了</el-button>
      </div>
    </template>
  </el-dialog>
</template>

<script setup>
import { ref, reactive, watch, onMounted } from "vue";
import { ElMessage } from "element-plus";
import { inboundOrderDetail, abnormalHandle } from "@/apis/procure/entry";
import useCodeArrStore from "@/store/modules/select";

const visible = ref(false);
const list = ref([]);
const detail = ref({});
const loading = ref(false);

const emit = defineEmits(["close", "submit"]);
const props = defineProps({
  optionInfo: {
    type: Object,
    default: () => {
      return {
        isShow: false,
        detail: {}
      };
    }
  }
});
watch(
  () => props.optionInfo.isShow,
  async val => {
    visible.value = val;
    loading.value = true;
  },
  { deep: true }
);
watch(
  () => props.optionInfo.detail,
  async val => {
    // console.log("明细===", val);
    detail.value = JSON.parse(JSON.stringify(val));
    list.value = detail.value.list;
    loading.value = false;
  },
  { deep: true }
);
onMounted(() => {});

const getName = code => {
  return useCodeArrStore().getDictName("shop_unit", code);
};

//查询详情数据
const getList = inboundId => {
  // inboundOrderDetail({ inboundId: inboundId }).then(async res => {
  //   if (res.code === 200) {
  //     detail.value = res.data;
  //     list.value = res.data.orderGoodsInfoList;
  //   }
  // });
};

//拼接商品的sku规格
const getSpes = properties => {
  if (!properties) return "-";
  const arr = JSON.parse(properties) || [];
  if (arr.length > 1) {
    const str = arr.reduce((a, b) => {
      return a.specificationVal + "+" + b.specificationVal;
    });
    return str;
  } else if (arr.length === 1) {
    return arr[0].specificationVal;
  } else {
    return "-";
  }
};

const clickClose = () => {
  emit("close");
};
</script>

<style lang="scss" scoped>
.block {
  height: 10px;
  margin: 20px -24px;
  background-color: #eef1f4;
}
header {
  display: flex;
  .left {
    img {
      width: 150px;
      height: 150px;
      border-radius: 4px;
    }
  }
  .right {
    flex: 1;
    padding-left: 20px;
    color: #3d3d3d;

    .f14 {
      color: #4e5969;
      margin-bottom: 10px;
    }
  }
}
.info {
  display: flex;
  .left {
    img {
      width: 80px;
      height: 80px;
      border-radius: 4px;
    }
  }
  .right {
    padding-left: 18px;
    .name {
      font-size: 14px;
      color: #3d3d3d;
      margin-bottom: 5px;
    }
    p {
      font-size: 12px;
      color: #86909c;
      margin-bottom: 5px;
    }
  }
}
</style>
